import React from 'react';
import { useState, useEffect } from 'react';
import './Profile.css'; // 样式文件
import defaultAvatar from '../assets/images/默认头像.jpg';
import {getFollowCount,getFanCount,getMyprofile} from '../api/userApi';

const Profile = ({ userId }) => { // 接收 userId 作为 props

  const [followingCount, setFollowingCount] = useState(0); // 状态管理关注数
  const [fansCount, setFansCount] = useState(0); // 状态管理粉丝数
  const [myProfile, setMyProfile] = useState(null); // 新增 myProfile 状态

  useEffect(() => {
    if (userId) {
      try{
        // 获取关注数和粉丝数
     getFollowCount(userId)
     .then((data) => {
       console.log('FollowCount', data); // 调试输出
       setFollowingCount(data);
     })
     getFanCount(userId)
     .then((data) => {
       console.log('FanCount', data); // 调试输出
       setFansCount(data);
     })

     // 获取用户信息
      getMyprofile(userId)
      .then((data) => {
        console.log('User profile data:', data); // 调试输出
        setMyProfile(data);  // 设置获取到的数据
      })

     }
     catch(error){
       console.log(error); // 调试输出
    }
  }
}, [userId]);

if (!myProfile) {
  return <div>Loading...</div>;
}



//渲染用户信息
const profile = {
  avatar: myProfile.image ? 'http://localhost:8080/' + myProfile.image : defaultAvatar,
  name: myProfile.account,
  id: myProfile.userId,
  following: followingCount,
  followers: fansCount,
  bio: myProfile.signature || "暂无简介"
};

  return (
    <div className="profile">
      {/* 头像 */}
      <div className="profile-avatar">
        <img 
          src={profile.avatar} 
          alt="User Avatar" 
          className="profile-avatar-image"
        />
      </div>
      {/* 用户信息 */}
      <div className="profile-info">
        <h2 className="profile-name">{profile.name}</h2>
        <p className="profile-id" style={{color: "gray"}}>ID: {profile.id}</p>
        <div className="profile-stats">
          <div  className="profile-stat">
            <span className="profile-following">关注</span>
            <span className="profile-following">{profile.following}</span>
          </div>
          <div className="profile-stat">
          <span className="profile-followers">粉丝</span>
            <span className="profile-followers">{profile.followers}</span>
          </div>
        </div>
        <p className="profile-bio"><span style={{color: "gray"}}>个人简介: </span>{profile.bio}</p>
     
      </div>
    </div>
  );
};

export default Profile;
